<html>

<head>
    <title>Guify Example</title>
    <link rel="icon" href="data:,">

    <style>
        body {
            background-color: #3e3e3e;
        }

        #fake-container {
            max-width: 512px;
            max-height: 512px;
            width: 80vw;
            height: 80vw;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5em;
            margin-bottom: 1.5em;
            position: relative;
        }

        #fake-container-content {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: rgb(255, 255, 230);

            display: flex;
            justify-content: center;
            /* align horizontal */
            align-items: center;
            /* align vertical */
        }
    </style>

    <!-- Ruin everything with Bootstrap to simulate invasive page styling -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp' crossorigin='anonymous'>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script> -->

    <!-- Inserts `guify` into the global namespace -->
    <script src='../lib/guify.js'></script>

</head>


<body>

    <div id="fake-container">
        <div id="fake-container-content">
            <div style="font-family: monospace;">
                [content]
            </div>
        </div>
    </div>

    <script>


        var container = document.getElementById("fake-container");
        console.log(this);

        // Create the GUI
        var gui = new guify({
            title: 'Test App',
            theme: 'dark', // dark, light, yorha, or theme object
            align: 'right', // left, right
            width: 300,
            barMode: 'offset', // none, overlay, above, offset
            panelMode: 'inner',
            opacity: 0.95,
            root: container,
            open: true
        });

        // Populate the GUI

        var someNumber = 0;
        gui.Register({
            type: 'range',
            label: 'Range',
            min: 0, max: 10,
            precision: 10,
            object: this, property: "someNumber",
            onChange: (data) => {
                console.log(someNumber);
            }
        });

        var steppedNumber = 8;
        gui.Register({
            type: 'range',
            label: 'Stepped Range',
            min: 8, max: 64, step: 8,
            object: this, property: "steppedNumber",
            onChange: (data) => {
                console.log(steppedNumber);
            }
        });

        var logNumber = 20;
        gui.Register({
            type: 'range',
            label: 'Log Range',
            object: this,
            property: 'logNumber',
            min: 0.1, max: 100, scale: 'log',
            onChange: (data) => {
                console.log(logNumber);
            }
        })

        var intervalNumber = [15, 30];
        gui.Register({
            type: 'interval',
            label: 'Interval',
            min: 5, max: 75,
            object: this, property: "intervalNumber",
            onChange: (data) => {
                console.log(intervalNumber);
            }
        });

        var steppedIntervalNumber = [10, 25];
        gui.Register({
            type: 'interval',
            label: 'Stepped Interval',
            min: 5, max: 75, step: 5,
            object: this, property: "steppedIntervalNumber",
            onChange: (data) => {
                console.log(steppedIntervalNumber);
            }
        });

        var logIntervalNumber = [15, 30];
        gui.Register({
            type: 'interval',
            label: 'Log Interval',
            scale: 'log',
            min: 5, max: 750,
            object: this, property: "logIntervalNumber",
            onChange: (data) => {
                console.log(logIntervalNumber);
            }
        });

        gui.Register({
            type: 'title',
            label: 'Title'
        });

        gui.Register({
            type: 'button',
            label: 'Button',
            action: () => {
                console.log('Clicked');
            }
        })

        var checkboxTest = false;
        gui.Register({
            type: 'checkbox',
            label: 'Checkbox',
            object: this,
            property: 'checkboxTest',
            onChange: (data) => {
                console.log(checkboxTest);
            }
        })

        var testSelection = 'Option 1';
        gui.Register({
            type: 'select',
            label: 'Select',
            object: this,
            property: 'testSelection',
            options: ['Option 1', 'Option 2'],
            onChange: (data) => {
                console.log(testSelection);
            }
        })

        var testText = 'Some text here';
        gui.Register({
            type: 'text',
            label: 'Text',
            object: this, property: 'testText',
            listenMode: 'input', // Can be 'input' or 'change'
            onChange: (data) => {
                console.log(testText);
            }
        })

        var rgbColor = 'rgb(255, 0, 0)';
        gui.Register({
            type: 'color',
            label: 'RGB Color',
            format: 'rgb',
            object: this,
            property: 'rgbColor'
        })

        var hexColor = '#00FF00';
        gui.Register({
            type: 'color',
            label: 'Hex Color',
            format: 'hex',
            object: this,
            property: 'hexColor'
        })

        var file = null;
        gui.Register({
            type: 'file',
            label: 'File',
            object: this,
            property: 'file',
            onChange: (data) => {
                console.log(data);
            }
        })

        var displayValue = "Displays the toString representation of a variable.";
        gui.Register({
            type: 'display',
            label: 'Display',
            object: this,
            property: 'displayValue'
        })

        // Folder example
        gui.Register({
            type: 'folder',
            label: 'Folder',
            open: false
        });

        // Add to the folder example
        gui.Register([
            { type: 'range', label: 'Range', min: 0, max: 20, step: 1 },
            { type: 'title', label: 'Title' },
            { type: 'button', label: 'Button' },
            { type: 'checkbox', label: 'Checkbox' },
            { type: 'select', label: 'Select', options: ["Option A", "Option B"] },
            { type: 'text', label: 'Text', initial: 'Some text' },
            { type: 'color', label: 'Color' },
        ], {
                folder: 'Folder'
            });

        gui.Register({
            type: 'text',
            label: 'long long long long long long long long label',
            folder: 'Folder',
        })

        // Add a nested folder
        gui.Register({ type: 'folder', label: 'Nested Folder', folder: 'Folder', open: false });
        gui.Register({ type: 'text', label: 'Folder Text', folder: 'Nested Folder', initial: 'Nested text' });

        // Debug folder
        gui.Register({
            type: 'folder',
            label: 'Debug',
            open: false
        })

        gui.Register({
            type: 'button',
            label: 'Toast Test',
            folder: 'Debug',
            action: () => {
                // Send a toast
                gui.Toast('Test Toast');
            },
        })

        gui.Register({
            type: 'button',
            label: 'Randomize Components',
            folder: 'Debug',
            action: () => {
                // Randomize all the values bound to components in this example.
                // Good test for whether component binding is actually working.
                someNumber = Math.random() * 10;
                steppedNumber = ~~((Math.random() + 0.1) * 8) * 8;
                logNumber = Math.random() * 99 + 0.1;
                checkboxTest = !checkboxTest;

                testText = (Math.random() + 1).toString(36).substring(7); // Random string
                rgbColor = 'rgb(' + Math.random() * 255 + ', 0, 0)';
                hexColor = "#";
                for (var i = 0; i < 6; i++) hexColor += Math.floor(Math.random() * 9).toString()

                testSelection = "Option " + (Math.random() < 0.5 ? "1" : "2");
            }
        })

        // This button gets automatically removed by our API
        var removedButton = gui.Register({
            type: 'button',
            label: 'Button',
            action: () => {
                console.log('Clicked');
            }
        })
        removedButton.container.disabled = true;
        gui.Remove(removedButton);



    </script>
</body>